<template>
    <div>
        <el-row>
        <el-col :span =8>
            <div class="ad">=====</div>
        </el-col>
        <el-col :span =8>
        <div>
            <el-form class="loginForm"
                     :ref="mainForm"
                     :model="user" :rules="rules">

                <el-form-item prop="username" class="loginItem">
                    <el-input v-model.trim="user.username" >
                        <template slot="prepend">账号:</template>
                    </el-input>
                </el-form-item>


                <el-form-item prop="password" class="loginItem">
                    <el-input v-model="user.password" ref="pwd">
                        <template slot="prepend">密码:</template>
                    </el-input>
                </el-form-item>

                <el-form-item >
                    <el-button type="primary" icon="el-icon-edit"
                               @click="loginByPwd()">登录
                    </el-button>
                    <el-button type="warning" icon="el-icon-remove"
                               @click="()=>$router.push('/reg')">注册
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        </el-col>
            <el-col :span =8>
                <div class="ad" >=====</div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    // import New from './components/New.vue';
    import {mapActions, mapMutations} from 'vuex';
    export default {

        name: "Login",
        components: {
            // New,Old,
        },
        props: {
            sampleP: {
                type: Number,
                default: 0
            },
        },
        data() {
            return {
                sampleD: 'value',
                user: {
                    username: "zhangjiu001",
                    password: "114477",
                },
                mainForm: 'loginForm',
                rules: {
                    username: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                        {pattern:/^\w+$/, message: '请输入字母/数字/下划线', trigger: 'blur' },

                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ],
                }
            }
        },
        computed: {
            // sampleC() {
            //     return this.sampleD+'--';
            // }
        },
        created() {
        },
        mounted() {
            let k = this.$route.params.username;
            if (k){
                this.user.username=k;
                this.user.password="";
                this.$refs['pwd'].focus();
            }
        },
        methods: {
            ...mapMutations(['setUserDetail','setAuth']),
            ...mapActions(['initLeaveTypes','initApplyStates','initAuditStates']),

            loginByPwd: function () {
                this.$notify({message: 'debug: '+JSON.stringify(
                        this.user  )});

                let url = "/login";
                this.$refs[this.mainForm].validate((valid) => {
                    // this.$message.warning(JSON.stringify("hi" + this.user.username+this.user.password));
                    if (valid) {
                        this.$http({
                            method: 'post',
                            url: url,
                            data: "username="+this.user.username+"&password="+this.user.password,
                        }).then(res => {

                            this.$message.warning(res.data.username+" 登录成功"+res.data.nickname);
                            this.setUserDetail({
                                username: res.data.username,
                                userId: res.data.userId,
                                nickname: res.data.nickname,
                                lastLoginTime: res.data.lastLoginTime,
                            });
                            this.setAuth(true);
                            this.initLeaveTypes();
                            this.initAuditStates();
                            this.initApplyStates();
                            // this.setUserDetail({
                            this.$nextTick(()=>{

                                this.$router.push("/manager");
                            });
                            //     username: res.data.username,
                            //     userId: res.data.userId,
                            //     nickname:res.data.nickname,
                            // });
                            //
                            //     "userId":1,"username":"zhangjiu001","password":"114477","nickName":"???","isEnable":tr

                        }).catch(res=> console.log("hi 登录异常哟"+JSON.stringify(res)));
                    } else {
                        this.$message.warning(JSON.stringify("validate mistake"))
                    }
                });

            },

        },
        watch: {
            // sampleC(newValue, oldValue) {
            //
            // }
        },
    }
</script>

<style scoped>
    /*<style lang='scss' scoped>*/
    .loginForm {
        background-color: gray;
        width: 80%;
        margin: 0 auto;
        border-radius: 10px;

    }
    .loginItem{
        margin: 5px auto;
        padding: 10px;
    }
    .ad{
        background-color: rgba(193, 230, 86, 0.71);
    }
</style>